<script>
export default {
  name: 'Traffic'
}
</script>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const { height } = defineProps(['height'])

const chart = ref()

onMounted(() => {
  const myEcharts = echarts.init(chart.value)

  const dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  const y = [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53]
  const y1 = [50, 48, 44, 62, 41, 78, 57, 70, 68, 93, 60, 73]
  const y2 = [74, 54, 64, 87, 55, 66, 44, 45, 65, 78, 35, 68]
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(33,56,77,1)',
      borderColor: 'rgba(33,56,77,1)',
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      axisPointer: {
        lineStyle: {
          color: 'rgba(19,255,241,1)',
          type: 'dashed',
          width: 2
        }
      }
    },
    legend: {
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 25,
      icon: 'stack',
      textStyle: {
        color: '#E1E5E6'
      }
    },
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true
    },
    xAxis: {
      data: dataX,
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        textStyle: {
          color: '#B5C5D4',
          fontSize: 12
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false // 去除刻度线
      }
    },
    yAxis: {
      type: 'value',
      axisTick: { show: false },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#B5C5D4',
          fontSize: 12
        }
      },
      // y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: '#9EA6B4',
          type: 'solid'
        }
      }
    },
    series: [
      {
        name: '2021年',
        smooth: true,
        type: 'line',
        // 填充颜色设置
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(253, 190, 93,.4)' // 渐变色的起始颜色
              },
              {
                offset: 0.9,
                color: 'rgba(253, 190, 93,0)' // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)'
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: 'rgba(253, 190, 93, 1)'
        },
        data: y2
      },
      {
        name: '2022年',
        smooth: true,
        type: 'line',
        // 填充颜色设置
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
              },
              {
                offset: 0.9,
                color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)'
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        symbolSize: 4,
        // 设置拐点颜色以及边框
        itemStyle: {
          // color: "rgba(241,162,42,1)",
          color: 'rgba(26, 119, 221, 1)'
        },
        data: y1
      },
      {
        name: '2023年',
        smooth: true,
        type: 'line',
        // 填充颜色设置
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
              },
              {
                offset: 0.9,
                color: 'rgba(26, 5, 221,0)' // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)'
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        symbolSize: 4,
        // 设置拐点颜色以及边框
        itemStyle: {
          // color: "rgba(241,162,42,1)",
          color: 'rgba(26, 5, 221, 1)'
        },
        data: y
      }
    ]
  }

  myEcharts.setOption(option)
})
</script>

<template>
  <div
    class="container"
    :style="{ height: isNaN(+height) ? height : height + 'px' }"
  >
    <div class="titleBox">
      <div class="title">
        年度游客量对比
        <div class="titleBg">&nbsp;</div>
      </div>
    </div>
    <div class="contentBox">
      <div
        class="chart"
        ref="chart"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  background-color: red;
  background: url(../../../images/dataScreen-main-rt.png) no-repeat;
  background-size: 100% 100%;
  color: white;

  $boxHeight: 14%;
  .titleBox {
    position: relative;
    width: 100%;
    height: $boxHeight;

    .title {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;

      .titleBg {
        margin-top: 10px;
        background: url(../../../images/dataScreen-title.png) no-repeat;
      }
    }
  }

  .contentBox {
    position: relative;
    width: 100%;
    height: calc(100% - $boxHeight);
    padding: 20px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
